<template>
  <div class="apply-wrapper">
    <div class="content">
      <div class="middle">
        <Input ref="searchInpur" placeholder="请输入业务员姓名/手机号" class="input-cls" @search="handleSearch" />
        <el-button v-for="(item, index) of buttonList" :key="index" :class="{ 'active': isActive == index }" @click="buttonClick(index)">{{ item }}</el-button>
      </div>
      <div class="bottom">
        <component :is="cmpName" :list="list" @success="handleDelete" @agree="handleAgree" @confirm="hanldeConfirm" />
      </div>
    </div>
    <Pagination class="pagination" :page-size="pageSize" :total="total" :cur-page="currentPage" @nextPage="handleNextPage" />
  </div>
</template>
<script>
import Input from '@/common/input'
import Pending from './enterExam/pending'
import Agree from './enterExam/agree'
import refuse from './enterExam/refuse'
import cancel from './enterExam/cancel'
import Pagination from '@/common/pagination'
import { getEnterList, applyAgree, applyRefuse } from '@/api/stock'
const ERR_OK = 200
export default {
  components: {
    Input,
    Pagination
  },
  data() {
    return {
      buttonList: ['待审批', '已同意', '已拒绝', '已核销'],
      isActive: 0,
      cmpName: Pending,
      page: 1,
      total: 0,
      pageSize: 0,
      currentPage: 0,
      list: [],
      query: ''
    }
  },
  created() {
    this._getEnterPendingList({ page: this.page })
  },
  methods: {
    handleDelete() {
      this.page = 1
      this.currentPage = 1
      switch (this.cmpName) {
        case Pending:
          this._getEnterPendingList({ page: this.page, condition: this.query })
          break
        case Agree :
          this._getEnterAgreeList({ page: this.page, condition: this.query })
          break
        case refuse :
          this._getEnterRefuseList({ page: this.page, condition: this.query })
          break
      }
    },
    handleSearch(query) {
      this.query = query
      this.page = 1
      this.currentPage = 1
      switch (this.cmpName) {
        case Pending:
          this._getEnterPendingList({ page: this.page, condition: this.query })
          break
        case Agree :
          this._getEnterAgreeList({ page: this.page, condition: this.query })
          break
        case refuse :
          this._getEnterRefuseList({ page: this.page, condition: this.query })
          break
      }
    },
    clearInput() {
      this.$refs.searchInpur.clear()
    },
    handleNextPage(page) {
      this.page = page
      switch (this.cmpName) {
        case Pending:
          this._getEnterPendingList({ page: this.page, condition: this.query })
          break
        case Agree :
          this._getEnterAgreeList({ page: this.page, condition: this.query })
          break
        case refuse :
          this._getEnterRefuseList({ page: this.page, condition: this.query })
          break
      }
    },
    deleteListItem(res) {
      console.log(res)
      const fIndex = this.list.findIndex((item, index) => {
        return item.id === res.data.id
      })
      if (fIndex >= 0) {
        this.list.splice(fIndex, 1)
      }
    },
    handleAgree(id) {
      this._applyAgree(id)
        .then(res => {
          if (res.code === ERR_OK) {
            this._getEnterPendingList({ page: this.page })
          }
        })
    },
    hanldeConfirm(id, remark) {
      this._applyRefuse(id, remark)
        .then(res => {
          if (res.code === ERR_OK) {
            this.deleteListItem(res)
          }
        })
    },
    buttonClick(index) {
      this.isActive = index
      this.page = 1
      this.list = []
      this.clearInput()
      switch (index) {
        case 0 :
          this.cmpName = Pending
          this._getEnterPendingList({ page: this.page })
          break
        case 1 :
          this.cmpName = Agree
          this._getEnterAgreeList({ page: this.page })
          break
        case 2 :
          this._getEnterRefuseList({ page: this.page })
          this.cmpName = refuse
          break
        case 3 :
          this._getEnterCancelList({ page: this.page })
          this.cmpName = cancel
          break
      }
    },
    _getEnterPendingList({ page, condition }) {
      getEnterList({ page, status: 0, condition })
        .then(res => {
          if (res.code === ERR_OK) {
            this.list = res.data.data
            this.total = res.data.total
            this.currentPage = res.data.current_page
            this.pageSize = parseInt(res.data.per_page)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getEnterAgreeList({ page, condition }) {
      getEnterList({ page, status: 1, condition })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.list = res.data.data
            this.total = res.data.total
            this.currentPage = res.data.current_page
            this.pageSize = parseInt(res.data.per_page)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getEnterRefuseList({ page, condition }) {
      getEnterList({ page, status: -1, condition })
        .then(res => {
          if (res.code === ERR_OK) {
            this.list = res.data.data
            this.total = res.data.total
            this.currentPage = res.data.current_page
            this.pageSize = parseInt(res.data.per_page)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getEnterCancelList({ page, condition }) {
      getEnterList({ page, condition, status: 2 })
        .then(res => {
          if (res.code === ERR_OK) {
            this.list = res.data.data
            this.total = res.data.total
            this.currentPage = res.data.current_page
            this.pageSize = parseInt(res.data.per_page)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _applyAgree(id) {
      return new Promise((resolve, reject) => {
        applyAgree(id)
          .then(res => {
            if (res.code === ERR_OK) {
              this._success(res)
              resolve(res)
            }
          })
          .catch(err => {
            console.log(err)
            reject(err)
          })
      })
    },
    _applyRefuse(id, remark) {
      return new Promise((resolve, reject) => {
        applyRefuse(id, remark)
          .then(res => {
            if (res.code === ERR_OK) {
              this._success(res)
              resolve(res)
            }
          })
          .catch(err => {
            console.log(err)
            reject(err)
          })
      })
    },
    _success(res) {
      this.$message({
        showClose: true,
        message: res.message,
        type: 'success'
      })
    },
    _warning(res) {
      this.$message({
        showClose: true,
        message: res.message,
        type: 'warning'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import '@/styles/el-pagination.scss';
.el-button {
  background: #ffff;
  height: 40px;
  &.active {
    background-color: rgba(64, 158, 255, 1);
    color: #fff;
  }
}
.apply-wrapper {
  padding: 0 20px;
  box-sizing: border-box;
  min-height: 102vh;
  .content{
     overflow-y: auto;
    .top {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    .title-wrapper {
      display: flex;
      align-content: center;
      .title {
        height: 44px;
        line-height: 44px;
        color: rgba(68, 68, 68, 1);
        font-size: 18px;
        font-family: Roboto;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
  .middle {
    display: flex;
    align-items: center;
    .input-cls{
      margin-right: 36px;
    }
  }
  .bottom{
    margin-top: 17px;
  }
  }

}
</style>
